@theme-color: teal;

.f-input,
.f-select,
.f-button {
  box-sizing: border-box;
}
fieldset {
  border: 0;
}


.f-form {
  padding: 1rem 0;
  .f-legend {
    display:block;
    font-size: 1.5rem;
    padding: .5rem;
    border-bottom: @input-border;
  }
  .f-container {
    padding: .5rem 0;
    position:relative;
  }
  .f-label {
    width: 100%;
    display:block;
    padding: @padding;
    @media only screen and(min-width:700px){
      display:inline-block;
      width:  40%;
      width: -webkit-calc(50% - @padding-total);
      width: calc(50% - @padding-total);
    }
  }
  .f-required .f-label {     
      &::after {
        content: '*';
      }
    }
  .f-readonly {
    color: @theme-color;
    & .f-input {
      background-color: lighten( @theme-color,20%);
      font-style: italic;
    }
  }
  .f-error {
    color: red;
    .f-input {
    border-color: red;
    }  }
  .f-select-label {
     position: relative;
    font-size: 0;
    display: inline-block;
    white-space:nowrap;
    overflow: hidden;
    width: 100%;
   
    &  .f-select {
      font-size: 1rem;
    }
    &:after {
      //.select-after;
    }
  }
  .f-input {
    // make sure that ipad and iphone get proper elements
    -webkit-appearance:none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
  }
  .f-input,
  .f-select{

    padding: @padding;
    border: @input-border;
    width: 100%;
    @media only screen and(min-width:700px){
      width: 40%;
      width: -webkit-calc(50% - 2px - @padding-total);
      width: calc(50% - 2px - @padding-total);
    }
    &:focus {
      outline: none;
      background-color: lighten( @secondary-color, 2%);
    }
    &:disabled {
      border-color:#ccc;
      color: #ccc;
    }
  &:readonly {
    border-width: 0 0 1px;
  }

  }
  .f-select {
    width: 100%;
  }
  .f-day-select  {
    width: 25%;
  }
  .f-month-select  {
    width: 30%;
  }
  .f-year-select  {
     width: 40%; 
  }
  
  .f-radio-label,
  .f-checkbox-label {
    position: relative;
     .f-radio,
      .f-checkbox {
      visibility: hidden;
      &:checked ~ .f-inner-label::before {
       background-color:#000; 
        .radio-checkbox-checked-before;
      }
     
      
    }
    
  }
  
  .f-inner-label {
      padding: @padding;
      &::before {
       // .radio-checkbox-before;
        
      }
    }
   .f-radio-label .f-inner-label::before {
        border-radius:1em;
      }
  .f-button {
    padding: @padding;
    text-decoration: none;
    &.f-button-primary {
      border: 1px solid #abd7ea;
      border-radius: .4rem;
      color: darken(#abd7ea,30%);
    background: #fff;
      font-weight: bold;
      float: right;
    }
    &.f-button-secondary {
      color:@secondary-color;
    }
  }
}